<template>
  <div class="home">
    <div class="sider-home">
      <sider-home
        :width="siderWidth"
        :minwidth="siderMinWidth"
        :height="100"
        :userName="userName"
        :userId="userId"
        :workId="workId"
        :sider-menus="menus"
      />
    </div>

    <div class="main-home">
      <div class="main-top">
        <div class="main-tabs">
          <view-tab-buttons></view-tab-buttons>
        </div>
        <div class="message">
          <router-link
            :to="{ path: '/messagemanage', query: { inEdit: 'S' } }"
            class="siderMessageLabel"
          >
            <div class="messageIcon">
              <svg-icon
                icon-class="message"
                style="
                  font-size: 1.5em;
                  color: black;
                  position: absolute;
                  top: 7px;
                  left: 7.5px;
                "
              />
              <div v-if="messageNum != 0" class="messageDot"></div>
            </div>
          </router-link>
        </div>
        <div class="userIcon">
          <el-popover
            placement="bottom"
            width="100"
            trigger="hover"
            style="padding: 6px"
          >
            <div style="display: flex; flex-direction: column">
              <div style="display: flex; flex-direction: row">
                <div style="width: 60px">
                  <img
                    src="../assets/touxiang.jpg"
                    title="头像"
                    style="
                      margin: 10px;
                      width: 50px;
                      height: 50px;
                      border-radius: 50%;
                      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
                        0 6px 20px 0 rgba(0, 0, 0, 0.19);
                    "
                    slot="reference"
                  />
                </div>
                <div style="margin-left: 10px">
                  <p
                    class="userName"
                    style="
                      line-height: 30px;
                      font-size: 1.2em;
                      font-weight: 700;
                    "
                  >
                    {{ userId }}
                  </p>
                  <p
                    class="userDept"
                    style="line-height: 30px; font-weight: 500"
                  >
                    {{ userName }}
                  </p>
                </div>
              </div>
              <div class="userInforDetail">
                <p @click="handlePasswordChange">
                  <svg-icon icon-class="editPassword" className="sysLogo" />
                  修改密码
                </p>
              </div>
              <div class="userInforDetail">
                <p @click="onLogout" style="">
                  <svg-icon icon-class="logout" className="sysLogo" />
                  退出
                </p>
              </div>
            </div>
            <img
              src="../assets/touxiang.jpg"
              title="头像"
              class="userIconImg"
              slot="reference"
            />
          </el-popover>
        </div>
      </div>

      <div class="mainBody">
        <keep-alive :include="caches">
          <router-view v-if="isRenderTab"></router-view>
        </keep-alive>
      </div>
    </div>
    <change-password ref="changePassword" />
  </div>
</template>

<script>
import SiderHome from '../components/SiderHome.vue';
import ViewTabButtons from '../components/ViewTabButtons.vue';
import ChangePassword from '@/components/ChangePassword.vue';
import { mapState, mapActions } from 'vuex';
// import { qryMsg } from '@/api/messageManage';
//import logo from '../assets/touxiang.jpg';

export default {
  name: 'BasicLayout',
  components: {
    SiderHome,
    ViewTabButtons,
    ChangePassword,
  },
  data() {
    return {
      siderWidth: 240,
      siderMinWidth: 180,
      messageNum: 0,
      pollingMessage: null,
      menus:[]
    };
  },
  computed: {
    ...mapState({
      // 动态主路由
      ...mapState('cache', ['caches']),
      ...mapState(['isRenderTab']),
      ...mapState({
        // 动态主路由
        mainMenu: (state) => state.permission.addRouters,
        userId: (state) => state.user.userId,
        userName: (state) => state.user.userName,
        workId: (state) => state.user.workId,
        allowedMenus: (state) => state.permission.allowedMenuMap,
      }),
    }),
  },
  watch: {},
  created() {
    const routes = this.mainMenu.find((item) => item.path === '/')
    this.menus = (routes && routes.children) || []
    this.collapsed = !this.sidebarOpened

    this.reGetDateOnRefresh();
    //this.InitMenu(this.funclist);
    console.log(this.allowedMenus);
    this.polling({ userId: this.userId, retType: 'num' });

    if (window.Notification) {
      if (Notification.permission == 'granted') {
        console.log('允许通知');
      } else if (Notification.permission != 'denied') {
        console.log('需要通知权限');
        Notification.requestPermission((permission) => {
          console.log(permission);
        });
      }
    } else {
      console.log('浏览器不支持Notification');
    }
  },
  mounted() {},
  methods: {
    ...mapActions(['RenewMenu', 'Login', 'InitMenu', 'refreshUser', 'Logout']),
    reGetDateOnRefresh() {
      this.refreshUser();
    },
    polling(params) {
      console.log(params);
      // qryMsg(params).then((response) => {
      //   let { flag, data, errMsg } = response;
      //   if (flag) {
      //     let { num } = data;
      //     let that = this;
      //     if (this.messageNum != num && num != 0) {
      //       this.messageNum = num;
      //       if (Notification.permission == 'granted') {
      //         this.popNotice(
      //           '收到新的消息',
      //           '你还有' + num + '条未读消息',
      //           '/messagemanage',
      //         );
      //       } else {
      //         this.$message.success({
      //           title: '有新的消息收到',
      //           message: '你还有' + num + '条未读消息',
      //           position: 'bottom-right',
      //           duration: 5000,
      //           onClick() {
      //             that.handlNotifyClick();
      //             this.close();
      //           },
      //         });
      //       }
      //     }

      //     console.log('定时获取消息数量:' + this.messageNum);
      //   } else {
      //     console.log('定时获取消息数量失败' + errMsg);
      //   }
      //   this.pollingMessage = setTimeout(() => {
      //     clearTimeout(this.pollingMessage);
      //     this.polling(params);
      //   }, 60000);
      // });
    },
    handlNotifyClick() {
      if (this.$route.path != '/messagemanage') {
        this.$router.push({ path: '/messagemanage', query: { inEdit: 'S' } });
      }
    },
    popNotice(title, content, url) {
      let that = this;
      let notification = new Notification(title, {
        body: content,
        //icon: logo,
      });

      notification.onclick = function (e) {
        console.log(e);
        that.$nextTick(() => {
          setTimeout(() => {
            if (that.$route.path != url) {
              that.$router.push({ path: url, query: { inEdit: 'S' } });
            }
          }, 500);
        });
        window.focus();
        notification.close();
      };
    },
    onLogout() {
      this.Logout();
      this.$router.push('/user/login');
    },
    handlePasswordChange() {
      this.$refs.changePassword.init();
    },
  },
  destroyed() {
    clearTimeout(this.pollingMessage);
  },
};
</script>

<style lang="less">
.home {
  display: flex;
  flex-flow: row;
  height: 100vh;
  width: 100vw;
}

.sider-home {
  width: 250px;
  height: 100%;
  padding: 10px 5px;
}
.main-home {
  flex: 1;
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: column;
  padding: 10px;
}

.main-top {
  min-height: 55px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.main-tabs {
  flex: 1;
  min-height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 10px;
}
.message {
  position: relative;
  margin-right: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #ebeef5;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.19);
  background-color: white;
}

.messageIcon {
  position: absolute;
  top: 4px;
  left: 5px;
  width: 40px;
  height: 40px;
  margin-right: 30px;
  border-radius: 50%;
  position: relative;
}
.messageDot {
  position: absolute;
  top: 6px;
  left: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: lawngreen;
}
.userIcon {
  position: relative;
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: 50%;
  border: 1px solid #ebeef5;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.19);
  background-color: white;
}
.userIconImg {
  position: absolute;
  top: 4px;
  left: 5px;

  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.userInforDetail {
  line-height: 30px;
  color: #878b90;
  padding: 0 10px;
}

.userInforDetail:hover {
  color: black;
  font-weight: 500;
}

.mainBody {
  flex: 1;
  width: 100%;
  margin-top: 10px;
}

li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
